import React from 'react';
import { Card, colors, Inter, V } from '@/components';

interface HomeHeaderProps {}

export const HomeHeader = (props: HomeHeaderProps) => {
  const data = [
    {
      title: '平均油耗',
      value: '2.98',
      desc: '升/百公里',
    },
    {
      title: '平均行程',
      value: '19.40',
      desc: '公里/天',
    },
    {
      title: '平均油费',
      value: '1.98',
      desc: '元/公里',
    },
    {
      title: '累计行程',
      value: '198',
      desc: '公里',
    },
    {
      title: '累计油费',
      value: '198',
      desc: '元',
    },
    {
      title: '累计优惠',
      value: '0.00',
      desc: '元',
    },
  ];
  const HeaderTitle = () => {
    return (
      <V f row sb ai="c">
        <Inter fs={24} fw="bold">
          本月统计
        </Inter>
        <Inter fs={14} fw="bold">
          2024年6月
        </Inter>
      </V>
    );
  };
  const GridItem = (info: { index: number; item: any }) => {
    const { index, item } = info;
    return (
      <V key={index} w="30%" ai="c" mb={8} mt={index === 0 ? 16 : 0}>
        <Inter fs={12} fw="400" c={colors.text.secondary}>
          {item.title}
        </Inter>
        <Inter mt={8} fs={14} fw="600" c={colors.text.primary}>
          {item.value}
        </Inter>
        <Inter mt={8} fs={12} fw="400" c={colors.text.secondary}>
          {item.desc}
        </Inter>
      </V>
    );
  };
  const HeaderGrid = () => {
    return (
      <V f row ai="c" mt={16} jc="sb" wrap>
        {data.map((item, index) => (
          <GridItem index={index} item={item} />
        ))}
      </V>
    );
  };

  return (
    <V p={16}>
      <Card>
        <HeaderTitle />
        <HeaderGrid />
      </Card>
    </V>
  );
};
